<template>
	<view>
		<u-navbar title=" " leftIcon=" " placeholder :bgColor="bgColor" :border="false">
			<view class="left-wrap" slot="left" @click="show = true">
				<view class="lesson">
					<view class="lesson-name text-overfllow1">{{ lessonName }}</view>
					<u-icon name="arrow-down" color="#000000" size="12" bold></u-icon>
				</view>
			</view>
		</u-navbar>

		<!-- 内容区，左右瀑布流 -->
		<view class="water-fall">

			<!-- 如果数据为空，显示暂无数据 -->
			<view v-if="leftList.length === 0 && rightList.length === 0" class="no-data-wrapper">
				<view class="no-data-text">暂无学习卡片</view>
			</view>

			<view class="left">
				<view class="card-item shadow" v-for="item in leftList" :key="item.id" @click="goNoteDetail(item)">
					<view class="card-top" :style="{ height: $u.random(282, 378) + 'rpx' }">
						<image mode="widthFix" :src="item.images" class="card-img"></image>
						<view class="user text-overfllow1">
							<view class="user-avatar">
								<image :src="item.avatar" mode="widthFix" class="avatar"></image>
							</view>
							<view class="username text-overfllow1">{{ item.username || "Tigo队长" }}</view>
						</view>
					</view>
					<view class="card-bottom">
						<view class="title text-overfllow2">{{ item.title }}</view>
						<!-- <view class="icon-btns">
							<view class="item">
								<u-icon name="heart" color="#000" size="12"></u-icon>
							</view>
							<view class="item">
								<u-icon name="star" color="#000" size="12"></u-icon>
							</view>
							<view class="item">
								<u-icon name="download" color="#000" size="12"></u-icon>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="right">
				<view class="card-item shadow" v-for="item in rightList" :key="item.id" @click="goNoteDetail(item)">
					<view class="card-top" :style="{ height: $u.random(282, 378) + 'rpx' }">
						<image mode="widthFix" :src="item.images" class="card-img"></image>
						<view class="user text-overfllow1">
							<view class="user-avatar">
								<image :src="item.avatar" mode="widthFix" class="avatar"></image>
							</view>
							<view class="username text-overfllow1">{{ item.username || "Tigo队长" }}</view>
						</view>
					</view>
					<view class="card-bottom">
						<view class="title text-overfllow2">{{ item.title }}</view>
						<!-- 互动按钮 -->
						<!-- <view class="icon-btns">
							<view class="item">
								<u-icon name="heart" color="#000" size="12"></u-icon>
							</view>
							<view class="item">
								<u-icon name="star" color="#000" size="12"></u-icon>
							</view>
							<view class="item">
								<u-icon name="download" color="#000" size="12"></u-icon>
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义弹窗，滚动加载专业课 -->
		<tn-popup v-model="show" @close="show = false" type="bottom"
			:custom-style="{ borderRadius: '20rpx 20rpx 0 0' }">
			<view class="popup-wrapper">
				<!-- 顶部 -->
				<view class="popup-header">
					<view class="title">选择专业课</view>
					<u-icon name="close" size="28" color="#999" @click="show = false" />
				</view>

				<!-- 滚动区域 -->
				<scroll-view class="popup-scroll" scroll-y :scroll-top="scrollTop" @scrolltolower="onScrollToLower"
					lower-threshold="50">
					<view v-if="majorList.length === 0 && !loadingMajorList" class="empty-text">
						暂无专业课数据
					</view>

					<view v-for="(item, index) in majorList" :key="index" class="major-item" @click="selectMajor(item)">
						{{ item.majorName }}
					</view>

					<view v-if="loadingMajorList" class="loading-text">加载中...</view>
					<view v-if="!majorListHasMore && majorList.length > 0" class="loading-text">已加载全部</view>
				</scroll-view>
			</view>
		</tn-popup>

		<custom-tab-bar :currentIndex="1"></custom-tab-bar>
	</view>
</template>

<script>
	import middleApi from '@/api/middle.js';
	import chouCircleRequest from '@/api/chouCircle.js'

	export default {
		data() {
			return {
				bgColor: 'transparent',
				show: false,
				lessonName: '专业课',
				majorList: [],

				majorListPageNum: 1,
				majorListPageSize: 20,
				majorListHasMore: true,
				loadingMajorList: false,

				scrollTop: 0, // scroll-view滚动位置


				leftList: [],
				rightList: [],
				hasMore: true,
				loading: false,
				pageNum: 1,
				pageSize: 10,
			}
		},

		onLoad() {
			// 页面加载时先加载第一页专业课列表
			this.resetMajorList()
			this.loadPostList()
		},

		onShow() {
			this.loadPostList()
		},

		methods: {

			// 加载抽贴数据
			async loadPostList() {
				if (!this.hasMore || this.loading) return;
				this.loading = true;

				try {
					const res = await chouCircleRequest.queryPostList({
						pageQueryDTO: {
							currentPage: this.pageNum,
							pageSize: this.pageSize
						},
						type: uni.getStorageSync('bindType')
					});

					const list = res?.data?.data?.content || [];

					// 分配到左右列
					list.forEach((item, index) => {
						if ((this.leftList.length <= this.rightList.length)) {
							this.leftList.push(item);
						} else {
							this.rightList.push(item);
						}
					});

					// 判断是否还有更多
					if (list.length < this.pageSize) {
						this.hasMore = false;
					} else {
						this.pageNum++;
					}

				} catch (e) {
					console.error('加载失败', e);
				} finally {
					this.loading = false;
				}
			},



			async queryMajorList() {
				if (!this.majorListHasMore || this.loadingMajorList) return
				this.loadingMajorList = true
				try {
					const params = {
						pageNum: this.majorListPageNum,
						pageSize: this.majorListPageSize,
					}
					const res = await middleApi.queryMajorList(params)
					if (res?.data?.code === 200) {
						const newList = res.data.data?.content || []
						if (newList.length < this.majorListPageSize) {
							this.majorListHasMore = false
						}
						this.majorList = [...this.majorList, ...newList]
						this.majorListPageNum++
						// 第一次加载时，自动设置默认选中第一个专业课
						if (!this.lessonName || this.lessonName === '专业课') {
							if (this.majorList.length > 0) {
								this.lessonName = this.majorList[0].majorName.trim()
							}
						}
					} else {
						uni.showToast({
							title: '未获取到专业课信息',
							icon: 'none',
						})
					}
				} catch (e) {
					uni.showToast({
						title: '网络异常',
						icon: 'none',
					})
				} finally {
					this.loadingMajorList = false
				}
			},

			// 选中专业课
			selectMajor(item) {
				this.lessonName = item.majorName
				this.show = false
			},

			// 弹窗打开时重置并加载第一页
			resetMajorList() {
				this.majorList = []
				this.majorListPageNum = 1
				this.majorListHasMore = true
				this.loadingMajorList = false
				this.queryMajorList()
			},

			// 滚动到底部触发加载更多
			onScrollToLower() {
				this.queryMajorList()
			},

			// 跳转详情页
			goNoteDetail(item) {
				uni.navigateTo({
					url: './noteDetail?item=' + encodeURIComponent(JSON.stringify(item)),
				})
			},
		},
	}
</script>


<style lang="scss" scoped>
	.title text-overfllow2 {
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出隐藏 */
		text-overflow: ellipsis;
		/* 超出显示省略号 */
	}

	.no-data-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		text-align: center;
		background-color: #f8f8f8;
		border-radius: 16rpx;
		margin: 40rpx auto;
		width: 80%;
	}

	.no-data-text {
		font-size: 28rpx;
		color: #999;
		line-height: 1.8;
	}

	.lesson {
		height: 66rpx;
		border-radius: 10rpx;
		background: #fcfcfc;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;

		.lesson-name {
			max-width: 480rpx;
			margin-right: 5rpx;
			color: #7f84a3;
		}
	}

	.water-fall {
		margin: 44rpx 20rpx;
		display: flex;
		justify-content: space-between;
		gap: 20rpx;

		.left,
		.right {
			width: 48%;
		}

		.card-item {
			border-radius: 30rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

			.card-top {
				position: relative;
				width: 100%;
				background: #f3f0ef;
				border-radius: 30rpx 30rpx 0 0;
				height: auto;

				.card-img {
					width: 100%;
					height: 100%;
					border-radius: 30rpx 30rpx 0 0;
				}

				.user {
					position: absolute;
					left: 0;
					bottom: 10rpx;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					padding-left: 20rpx;

					.user-avatar {
						width: 36rpx;
						height: 36rpx;
						background: #d8d8d8;
						border-radius: 50%;
						flex-shrink: 0;

						.avatar {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.username {
						font-weight: 600;
						font-size: 18rpx;
						color: #3d3d3d;
						margin-left: 10rpx;
						padding-right: 10rpx;
						box-sizing: border-box;
					}
				}
			}

			.card-bottom {
				width: 100%;
				padding: 20rpx;
				background-color: #ffffff;
				border-radius: 0 0 30rpx 30rpx;
				box-sizing: border-box;

				.title {
					width: 100%;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					color: #3d3d3d;
					font-size: 24rpx;
					line-height: 34rpx;
					font-weight: 600;
				}

				.icon-btns {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.icon {
							width: 25rpx;
							height: 25rpx;
						}

						.icon-name {
							color: #3d3d3d;
							font-size: 12rpx;
							margin-top: 8rpx;
							font-weight: 600;
						}
					}
				}
			}
		}
	}

	/* 弹窗样式 */
	.popup-wrapper {
		max-height: 70vh; // 限制最大高度（避免底部留白）
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 32rpx;
		border-bottom: 1rpx solid #eee;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.popup-scroll {
		height: auto;
		max-height: 70vh;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		overflow-y: scroll;
	}

	.major-item {
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.empty-text,
	.loading-text {
		text-align: center;
		padding: 20rpx;
		font-size: 26rpx;
		color: #999;
	}
</style>